<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webApI</title>
</head>
<body>
    <div id="droptarget" style="height: 80vh;border:aquamarine solid;">
        <p id="output"></p>
    </div>
    <ol>
        <li>原子操作，多线程？ </li>
        <li></li>
    </ol>
</body>
<script>
    let droptarget = document.getElementById("droptarget"); 
    function handleEvent(event) { 
     let info = "", 
     output = document.getElementById("output"), 
     files, i, len; 
     event.preventDefault(); 
     if (event.type == "drop") { 
         files = event.dataTransfer.files; 
         i = 0; 
         len = files.length; 
        while (i < len) { 
         info += `${files[i].name} (${files[i].type}, ${files[i].size} bytes)<br>`; 
         i++; 
        } 
         output.innerHTML = info; 
     } 
    } 
droptarget.addEventListener("dragenter", handleEvent); 
droptarget.addEventListener("dragover", handleEvent); 
droptarget.addEventListener("drop", handleEvent);
</script>
</html>